<template>
    <div class="stock-card">
        <div class="header">
            <div class="left-box">
                <div class="stock-code">{{ stock_code }}</div>
                <div class="company">{{ company }}</div>
            </div>
            <div class="right-box" :style="`--local-color: ${ parseFloat(value) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">
                <div class="value">{{ value }}</div>
                <div class="pointer"></div>
            </div>
        </div>
        <div class="body">
            <div class="price">{{ price }}</div>
            <div class="more-info">
                <div class="item" v-for="item in more" :key="item.id">
                    <div class="k">{{ item.k }}</div>
                    <div class="v">{{ item.v }}</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <Link1 v-for="item in footer" :key="item.id" :text="item.text" :icon="item.icon" :active_icon="item.active_icon" padding="0" @click="item.click"></Link1>
        </div>
    </div>
</template>

<script setup>
import Link1 from '@/components/common/link/Link1.vue';

import { history_ws, realtime_ws, resetAllConnection, active_stock } from '@/service/market.js';
import { mountTo } from '@/utils/jump';

const props = defineProps({
    symbol: { type: String,  default: '' },      // 传递给 ws 的股票代码
    stock_code: { type: String,  default: '' },  // 股票代码
    company: { type: String,  default: '' },     // 公司名称
    value: { type: String,  default: '+0.00%' }, // 跌涨幅的值
    price: { type: String,  default: '$0.00' },  // 当前股票价格
    more: { type: Array,  default: [] },         // 更多信息
    trade: { type: Function,  default: () => {} }
});

const footer = [
    {
        id: 1,
        text: 'Chart',
        icon: '/icon/chart.svg',
        active_icon: '/icon/chart-active.svg',
        click: () => {
            // 恢复到最开始的阶段
            resetAllConnection();
            // 更新货币
            active_stock.value = props.symbol;
            localStorage.setItem('active_stock', props.symbol);
            // 将两个 websocket 连接初始化
            history_ws.init();
            realtime_ws.init();
            // 移动到页面顶部
            mountTo('#market-overview');
        },
    },
    {
        id: 2,
        text: 'Stats',
        icon: '/icon/stats.svg',
        active_icon: '/icon/stats-active.svg',
        click: () => {},
    },
    {
        id: 3,
        text: 'Trade',
        icon: '/icon/trade.svg',
        active_icon: '/icon/trade-active.svg',
        click: () => { props.trade(); },
    },
];
</script>

<style scoped lang="less">
.stock-card {
    box-sizing: border-box;
    padding: 1vw;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
    border-radius: 0.5vw;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-box {
            display: flex;
            flex-direction: column;

            .stock-code {
                font-size: 0.9vw;
                font-weight: 600;
            }

            .company {
                font-size: 0.7vw;
                font-weight: 400;
                color: var(--text-light-color);
            }
        }

        .right-box {
            display: flex;
            gap: 0.2vw;

            .value {
                font-size: 0.9vw;
                font-weight: 600;
                color: var(--local-color);
            }
        }
    }

    .body {
        display: flex;
        flex-direction: column;
        gap: 0.5vw;
        margin: 0.6vw 0 1vw;

        .price {
            font-size: 1.2vw;
            font-weight: 600;
            color: var(--text-strong-color);
        }

        .more-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5vw;

            .item {
                display: flex;
                flex-direction: column;
                gap: 0.2vw;

                .k, .v {
                    font-size: 0.7vw;
                }

                .k {
                    color: var(--text-light-color);
                }

                .v {
                    color: var(--text-strong-color);
                }
            }
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        border-top: 0.1vw solid rgb(229, 231, 235);
        padding-top: 0.5vw;
    }
}
</style>